<template>
  <div class="subpage unbind-card-container">
      <ul class="unbind-info-list">
        <li>
          <div class="tag-name">银行卡号</div>
          <div class="tag-info-other">
            <span>****</span>
            <span>****</span>
            <span>****</span>
            <span>{{bankNumber}}</span>
          </div>
        </li>
        <li>
          <div class="tag-name">手机号码</div>
          <div class="tag-info">{{showPhone}}</div>
        </li>
        <li>
          <div class="tag-name">验证码</div>
          <div class="tag-info">
                <input type="tel" class="auth-code" placeholder="请输入验证码" maxlength="4" v-model="authCode">
                <button class="u-send-msg-btn" v-if="!sendMsgFlag" @click="sendMsg" :disabled="sendMsgFlag">{{sendBtnText}}</button>
                <span class="times color-primary" v-if="sendMsgFlag">{{times}}</span>
          </div>
        </li>
      </ul>
      <div class="unbind-card-botttom">
          <van-button round class="u-btn-default u-bg-gradient-light" @click="unbindCardFn">提交</van-button>
          <div class="unbind-card-tips">
              <p>温馨提示</p>
              <p>解绑银行卡将影响你的资金安全及提现操作，请谨慎确认是否解绑该银行卡</p>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bankNumber: '',
      showPhone: '',
      phone: '',
      authCode: '', //验证码
      sendMsgFlag: false, //发送验证码状态
      sendBtnText: '发送验证码', //验证码文字
      times: '60s', //倒计时文字
    }
  },
  created() {
    if(!this.$store.getters.userInfo.cardNumber){
      this.$router.back()
      return;
    }
    let userPhone = this.$store.getters.userInfo.phone;
    this.phone = userPhone;
    this.showPhone = userPhone.substr(0, 3) + '****' + userPhone.substr(7);
    this.bankNumber = this.$store.getters.userInfo.cardNumber.substr(-4);
  },
  methods: {
    sendMsg() { //发送验证码
        if(!this.$tool.validator.isEmpty(this.phone)){
            this.$tool.toast('请输入手机号')
            return;
        }

        if(!this.$tool.validator.isMobilePhone(this.phone)){ 
            this.$tool.toast('请输入正确的手机号')
            return; 
        }
        this.sendMsgAjax()
    },

    sendMsgAjax() {
        let postData = {
            phone: this.phone,
            smsType: 5
        }
        this.$api.post('/api/sms/send_sms', postData)
            .then((res) => {
                this.sendMsgFlag = true;
                this.countdown();
            })
    },

    countdown() { //倒计时
        let time = 60;
        let t = setInterval(() => {
            time--;
            this.times = `${time}s`;
            if(time <= 0){
                clearInterval(t)
                this.sendBtnText = '重新获取';
                this.sendMsgFlag = false;
                this.times = '60s';
            }
        }, 1000)
    },

    unbindCardFn() { //解绑
      if(!this.$tool.validator.isEmpty(this.authCode)){
        this.$tool.toast('请输入验证码')
        return;
      }
      if(!this.$tool.validator.isMsgCode(this.authCode)){
          this.$tool.toast('请输入4位数字验证码')
          return;
      }

      this.unbindCardAjax()
    },

    unbindCardAjax() { //解绑请求
      console.log('解绑请求')
      this.$api.post(`/api/user/delBankCard/${this.$route.params.id}/${this.authCode}`)
          .then((res) => {
              this.$tool.toast('已解绑', 800)
              setTimeout(() => {
                this.$router.push({
                  name: 'personalInfo'
                })
              }, 1000);
          })
    }
  }
}
</script>

<style lang="scss" scoped>
  .unbind-card-container {
    .unbind-info-list {
      width: 100%;
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 20px 16px;
        box-sizing: border-box;
        border-bottom: 1px solid #F2F2F2;
        overflow: hidden;
        background-color: #fff;
        .tag-name {
          font-size: 16px;
        }
        .tag-info-other {
          display: flex;
          width: 240px;
          font-size: 16px;
          span {
            position: relative;
            top: 4px;
            margin-right: 10px;
          }
          span:last-child {
            top: 0;
          }
        }
        .tag-info {
          display: flex;
          justify-content: space-between;
          width: 240px;
          font-size: 16px;
          input {
              height: 25px;
              flex: 1;
              font-size: 16px;
              outline: none;
              border: none;
              background-color: #fff;
          }
          .auth-code {
              width: 40px;
          }
        }
      }
      li:last-child {
        border-bottom: none;
      }
    }
    .unbind-card-botttom {
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
      margin-top: 22px;
      .unbind-card-tips {
        margin-top: 33px;
        p {
          line-height: 22px;
          color: #969C9E;
        }
        p:first-child {
          margin-bottom: 10px;
        }
      }
    }
  }
</style>